<template>
  <div class="container">
    <el-card>
      <div class="tm">充值统计</div>
      <el-form inline>
        <el-form-item>
          <el-select v-model="value1" placeholder="商户">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            end-placeholder="开始日期"
            range-separator="至"
            start-placeholder="结束日期"
            type="datetimerange"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="value1" placeholder="全部">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-button @click="btnEdit">查询</el-button>
        <!-- <el-form-item></el-form-item> -->
      </el-form>
      <div class="tm">充值概况</div>
      <div class="card">
        <el-card class="box">
          <div class="tille">今日新增充值(元)</div>
          <h1>0</h1>
        </el-card>
        <el-card class="box">
          <div class="tille">本月累计充值(元)</div>
          <h1>0</h1>
        </el-card>
        <el-card class="box">
          <div class="tille">总充值(元)</div>
          <h1>0</h1>

          <div class="tm">每日充值增长明细</div>
        </el-card>
      </div>
      <div class="tm">充值增长趋势</div>
      <div ref="myChart" :style="{ width: '100%', height: '300px' }"></div>
      <div class="tm">每日充值增长明细</div>
      <el-table>
        <el-table-column label="日期" />
        <el-table-column label="新增充值" />
      </el-table>
    </el-card>
    <!-- <el-card> -->
    <!-- <div class="tm">每日充值增长明细</div>
    <el-table>
      <el-table-column label="日期" />
      <el-table-column label="新增充值" />
    </el-table> -->
    <!-- </el-card> -->
  </div>
</template>

<script>
  // import echarts from 'echarts'
  // import * as echarts from 'echarts'
  // 或
  import Vue from 'vue'
  const echarts = require('echarts')

  Vue.prototype.$echarts = echarts
  export default {
    data() {
      return {
        options1: [
          { value: '选项1', label: '黄金糕' },
          { value: '选项2', label: '双皮奶' },
          { value: '选项3', label: '蚵仔煎' },
          { value: '选项4', label: '龙须面' },
          { value: '选项5', label: '北京烤鸭' },
        ],
        value1: '',
      }
    },
    // mounted() {
    //   window.addEventListener('resize', this.chartResize)
    // },
    // destroyed() {
    //   window.removeEventListener('resize', this.chartResize)
    // },
    mounted() {
      this.drawLine()
    },
    methods: {
      btnEdit() {},
      drawLine() {
        let myChart = this.$echarts.init(this.$refs.myChart)
        myChart.setOption({
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'line',
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        })
      },
    },
  }
</script>

<style scoped>
  .card {
    display: flex;
    justify-content: space-around;
  }
  .card .box {
    background: rgba(3, 134, 128, 0.1);
  }
  .tille {
    font-size: 24px;
  }
  h1 {
    text-align: center;
  }
  .tm {
    font-size: 16px;
    margin-bottom: 16px;
  }
  /* el-table {
    background-color: white;
    margin-top: -50px;
  } */
</style>
